<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: 欢迎来到首页</div>
    <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="addDetailData">新 增</el-button>
  </div>
</template>

<script>
// /* eslint-disable */
export default {
  created() {
    this.initWebSocket()
  },
  methods: {
    addDetailData() {
      this.$notify({
        title: '删除成功',
        type: 'success',
        duration: 2500
      })
      // this.$message({ message: '保存成功！', type: 'success' })
    },
    initWebSocket() {
      var websocket = null
      if ('WebSocket' in window) {
        // 这里写死， 1为用户id
        websocket = new WebSocket('ws://localhost:8888/webSocket/' + '1')
      } else {
        alert('该浏览器不支持websocket')
      }
      websocket.onopen = function(event) {
        console.log('建立连接')
      }
      websocket.onclose = function(event) {
        console.log('关闭连接')
      }
      websocket.onmessage = function(event) {
        console.log('收到消息' + event.data)
        // 弹窗，播放音乐
        // $("#mymodal").modal('show')

        // document.getElementById('notice').play();
      }
      websocket.onerror = function() {
        alert('websocket通信发生错误')
      }

      window.onbeforeunload = function() {
        websocket.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
